<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridFixedHeader.aspx.cs"
    Inherits="GridFixedHeader" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <link href="css/defaultStyles.css" rel="stylesheet" type="text/css" />
    <link href="css/SoberTable.css" rel="stylesheet" type="text/css" />
    <link href="css/Excel.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="frmgrid" runat="server">
        <asp:ScriptManager runat="server" ID="scrpManager">
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/ColumnTypes.js" />
                <asp:ScriptReference Path="~/Scripts/GridFixedHeader.js" />
            </Scripts>
        </asp:ScriptManager>
        <asp:Button runat="server" ID="btnAstoria" Text="Data Bind" Style="display: none" />
        <Raj:AstoriaDSExtender runat="server" ID="asbehaviorPnl" BehaviorID="asBehavior"
            TargetControlID="btnAstoria" DatabaseURI="http://astoria.sandbox.live.com/northwind/northwind.rse"
            DataFormat="json" StartPageIndex="0" PageSize="8" Query="/Categories" OnClientDataReady="endDownload"
            ErrorPanelId="divContainsErrorInfo" ExpandRecord="Products" />
        <div style="position: absolute; top: 100px; left: 30px;">
            <table width="75%" style="text-align: center;" class="generic_data_table" cellpadding="0"
                cellspacing="0" id="tblDataTable">
                <tbody>
                    <tr>
                        <td colspan="7" class="actionsHeader">
                            <a onclick="goPrev();" href="#">Prev</a>&nbsp;&nbsp;&nbsp; <a href="#" onclick="goNext();">
                                Next</a>
                        </td>
                    </tr>
                </tbody>
                <tbody style="height: 100px; overflow: scroll">
                    <img src="images/Loading.gif" />
                </tbody>
            </table>
        </div>
        <table width="400px" style="height: 100px;" class="generic_data_table">
            <thead>
                <tr>
                    <th>
                        Header</th>
                </tr>
            </thead>
            <tbody style="height: 100px; overflow: hidden">
                <tr>
                    <td>
                        <div style="height: 100px; overflow: scroll">
                            <table>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                                <tr>
                                    <td>
                                        Data Column</td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="divSubDetails" style="display: none; position: absolute;" class="subDetailsRow">
            <table style="text-align: center; table-layout: fixed; background-color: #ffffff;
                padding: 4px 4px 4px 4px; margin: 4px  4px  4px  4px;" cellpadding="0" cellspacing="0"
                id="tblSubDataTable" class="generic_data_table">
                <tbody>
                    <%--<tr>
                        <td colspan="5" class="actionsHeader">
                            <a onclick="goPrev();" href="#">Prev</a>&nbsp;&nbsp;&nbsp; <a href="#" onclick="goNext();">
                                Next</a>
                        </td>
                    </tr>--%>
                </tbody>
                <tbody>
                </tbody>
            </table>
        </div>
        <div id="divSubSubDetails" style="display: none; position: absolute; width: 91%;"
            class="subDetailsRow">
            <table width="100%" style="text-align: center; table-layout: fixed; background-color: #ffffff;
                padding: 4px 4px 4px 4px; margin: 4px  4px  4px  4px;" cellpadding="0" cellspacing="0"
                id="tblSubSubDataTable">
                <tbody>
                    <tr>
                        <td colspan="5" class="actionsHeader">
                            <a onclick="goPrev();" href="#">Prev</a>&nbsp;&nbsp;&nbsp; <a href="#" onclick="goNext();">
                                Next</a>
                        </td>
                    </tr>
                </tbody>
                <tbody>
                </tbody>
            </table>
        </div>
        <asp:Panel runat="server" ID="divModalAddnewUser" Style="width: 250px; display: none"
            CssClass="coolbluePane">
            <b>Add New Row</b>
            <div class="white">
                <ul style="position: relative; left: 10%;">
                    <li>Column 1 :
                        <asp:TextBox runat="server" ID="txtColumn1"></asp:TextBox>
                    </li>
                    <li>Column 2 :
                        <asp:TextBox runat="server" ID="txtColumn2"></asp:TextBox></li>
                    <li>Column 3 :
                        <asp:TextBox runat="server" ID="txtColumn3"></asp:TextBox></li>
                    <li>Column 4 :
                        <asp:TextBox runat="server" ID="txtColumn4"></asp:TextBox></li>
                </ul>
            </div>
            <div style="position: relative; left: 20%;">
                <asp:Button runat="server" ID="btnAddnewRowOk" CssClass="buttonBlack" Text="Save" />
                <asp:Button runat="server" ID="btnAddnewRowCancel" CssClass="buttonBlack" Text="Cancel" />
            </div>
        </asp:Panel>
        <asp:DropDownList runat="server" ID="ddlEditItem" Style="display: none">
            <asp:ListItem Text="Value 0" Value="0"></asp:ListItem>
            <asp:ListItem Text="Value 1" Value="0"></asp:ListItem>
            <asp:ListItem Text="Value 2" Value="0"></asp:ListItem>
            <asp:ListItem Text="Value 3" Value="0"></asp:ListItem>
            <asp:ListItem Text="Value 4" Value="0"></asp:ListItem>
        </asp:DropDownList>
        <div style="position: absolute; top: 10px; right: 100px; height: 50px; width: 400px;"
            id="divContainsErrorInfo" class="yellow">
        </div>

        <script language="javascript" type="text/javascript">
            var _prevSelectedRow=null;
            function pageLoad() {
                $find("asBehavior").DataBind();
            }
             function endDownload(source,eventArgs) {
             var listData=eval( '(' + eventArgs.get_data() + ')' );
             var columnSpecifications = {Columns:[{headerName:"Expand",dataText:"Expand",noAction:true,Style:{Width:"30px"},subDataTableId:"tblSubDataTable",subDetailsDivID:"divSubDetails"},
                                       {headerName:"CategoryID",dataFieldName:"CategoryID",noAction:false},
                                       {headerName:"CategoryName",dataFieldName:"CategoryName",noAction:false}]}
             //BindGrid(_subDetailsData,"tblSubDataTable",columnSpecifications,false,"")
              BindGrid(listData,"tblDataTable",columnSpecifications,true,"Products")
             }
             function goNext(){
                $find("asBehavior").set_currentPageIndex( $find("asBehavior").get_currentPageIndex() + 1 );
                $find("asBehavior").DataBind();
             }
             function goPrev(){
                $find("asBehavior").set_currentPageIndex( $find("asBehavior").get_currentPageIndex() - 1 );
                $find("asBehavior").DataBind();
             }

        </script>

    </form>
</body>
</html>
